<template>
  <div class="field-value-select">
    <div class="field-value-select__type">
      <el-select v-model="subItem.fieldValueType" placeholder="请选择" filterable @change="handleChangeFieldValueType">
        <el-option v-for="subItem in conditionTypeOptions" :key="subItem.value" :label="subItem.label" :value="subItem.value" />
      </el-select>
    </div>
    <div class="field-value-select__text">
      <el-select v-model="subItem.fieldValue" placeholder="请选择" v-if="subItem.fieldValueType === 1" filterable @change="handleChangeFieldValue">
        <el-option v-for="item in usedFormItems" :key="item.__vModel__" :label="item.__config__.label" :value="item.__vModel__"></el-option>
      </el-select>
      <template v-if="subItem.fieldValueType=== 2">
        <template v-if="subItem.jnpfKey==='inputNumber'">
          <InputNumberRange v-if="isRange" v-model="subItem.fieldValue" :precision="subItem.precision" controls-position="right" />
          <el-input-number v-else v-model="subItem.fieldValue" placeholder="请输入" :precision="subItem.precision" controls-position="right" />
        </template>
        <template v-else-if="subItem.jnpfKey==='calculate'">
          <el-input-number v-model="subItem.fieldValue" placeholder="请输入" :precision="subItem.precision || 0" controls-position="right" />
        </template>
        <template v-else-if="['rate','slider'].includes(subItem.jnpfKey)">
          <el-input-number v-model="subItem.fieldValue" placeholder="请输入" controls-position="right" />
        </template>
        <template v-else-if="subItem.jnpfKey==='switch'">
          <el-switch v-model="subItem.fieldValue" :active-value="1" :inactive-value="0" />
        </template>
        <template v-else-if="subItem.jnpfKey==='timePicker'">
          <el-time-picker v-model="subItem.fieldValue" placeholder="请选择" clearable :value-format="subItem.format" :format="subItem.format" :is-range="isRange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
          </el-time-picker>
        </template>
        <template v-else-if="['createTime', 'modifyTime','datePicker'].includes(subItem.jnpfKey)">
          <el-date-picker v-if="isRange" v-model="subItem.fieldValue" clearable placeholder="请选择" type="daterange" :format="subItem.format || 'yyyy-MM-dd'" value-format="timestamp" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          <JnpfDatePicker v-else v-model="subItem.fieldValue" clearable placeholder="请选择" :type="subItem.type" :format="subItem.format">
          </JnpfDatePicker>
        </template>
        <template v-else-if="['organizeSelect','currOrganize'].includes(subItem.jnpfKey)">
          <JnpfOrganizeSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>
        <template v-else-if="['depSelect'].includes(subItem.jnpfKey)">
          <JnpfDepSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>
        <template v-else-if="['usersSelect', 'userSelect', 'createUser', 'modifyUser'].includes(subItem.jnpfKey) && subItem.symbol === 'belongDept'">
          <JnpfOrganizeSelect v-model="subItem.fieldValue" multiple isOnlyDeptSelectable isOnlyLeaf clearable placeholder="请选择" />
        </template>
        <template v-else-if="['usersSelect', 'userSelect', 'createUser', 'modifyUser'].includes(subItem.jnpfKey) && subItem.symbol === 'belongRole'">
          <JnpfRoleSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>

        <template v-else-if="['usersSelect', 'userSelect', 'createUser', 'modifyUser'].includes(subItem.jnpfKey) && subItem.symbol === 'belongPos'">
          <JnpfPosSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>
        <template v-else-if="['usersSelect', 'userSelect', 'createUser', 'modifyUser'].includes(subItem.jnpfKey) && subItem.symbol === 'belongGroup'">
          <JnpfGroupSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>

        <template v-else-if="['userSelect', 'createUser', 'modifyUser'].includes(subItem.jnpfKey) ">
          <JnpfUserSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>

        <template v-else-if="['usersSelect'].includes(subItem.jnpfKey)">
          <JnpfUsersSelect v-model="subItem.fieldValue" multiple placeholder="请选择" clearable />
        </template>
        <template v-else-if="['posSelect','currPosition'].includes(subItem.jnpfKey)">
          <JnpfPosSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>
        <template v-else-if="subItem.jnpfKey==='areaSelect'">
          <JnpfAreaSelect v-model="subItem.fieldValue" placeholder="请选择" :level="level" clearable />
        </template>
        <template v-else-if="subItem.jnpfKey==='groupSelect'">
          <JnpfGroupSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>
        <template v-else-if="subItem.jnpfKey==='roleSelect'">
          <JnpfRoleSelect v-model="subItem.fieldValue" placeholder="请选择" clearable />
        </template>
        <template v-else>
          <el-input v-model="subItem.fieldValue" placeholder="请输入"></el-input>
        </template>
      </template>
      <el-select v-if="subItem.fieldValueType === 3" v-model="subItem.fieldValue" placeholder="请选择" filterable @change="handleChangeBuiltFieldValue">
        <el-option v-for="item in builtOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-if="subItem.fieldValueType === 4" v-model="subItem.fieldValue" placeholder="请选择" filterable>
        <el-option v-for="item in approverOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-if="subItem.fieldValueType === 5" v-model="subItem.fieldValue" placeholder="请选择" filterable>
        <el-option v-for="item in sqlAndHttpOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-if="subItem.fieldValueType === 6" v-model="subItem.fieldValue" placeholder="请选择" filterable @change="handleChangeParamsConfig">
        <el-option v-for="item in paramsConfigOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  import InputNumberRange from './InputNumberRange';
  import { SYMBOL_RANGE_KEY } from './ConditionItem';

  const CONDITION_TYPE_OPTIONS = [
    {
      label: '字段',
      value: 1
    },
    {
      label: '自定义',
      value: 2
    },
    {
      label: '内置字段',
      value: 3
    },
    {
      label: '内置参数',
      value: 6
    }
  ]

  const APPROVER_TYPE_ITEM = {
    label: '来自审批节点',
    value: 4
  }

  const SQL_AND_HTTP_TYPE_ITEM = {
    label: '来自SQL/HTTP节点',
    value: 5
  }

  export default {
    name: 'FieldValueSelect',
    components: { InputNumberRange },
    props: {
      value: {
        type: Object,
        default: () => ({})
      },
      usedFormItems: {
        type: Array,
        default: () => []
      },
      builtOptions: {
        type: Array,
        default: () => []
      },
      prevNodeIsApproverNode: {
        type: Boolean,
        default: false
      },
      approverOptions: {
        type: Array,
        default: () => []
      },
      prevNodeIsSqlAndHttp: {
        type: Boolean,
        default: false
      },
      sqlAndHttpOptions: {
        type: Array,
        default: () => []
      },
      paramsConfig: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      subItem: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      },
      conditionTypeOptions() {
        const options = [...CONDITION_TYPE_OPTIONS];
        if (this.prevNodeIsApproverNode) {
          options.push(APPROVER_TYPE_ITEM)
        }
        if (this.prevNodeIsSqlAndHttp) {
          options.push(SQL_AND_HTTP_TYPE_ITEM)
        }
        return options
      },
      // 是否是范围
      isRange() {
        return SYMBOL_RANGE_KEY.includes(this.subItem.symbol)
      },
      paramsConfigOptions() {
        return this.paramsConfig.map(item => ({
          label: item.field,
          value: item.field
        }))
      }
    },
    methods: {
      handleChangeFieldValue(val) {
        const obj = this.usedFormItems.filter(o => o.__vModel__ == val)[0]
        if (["modifyTime", "createTime"].includes(obj.__config__.jnpfKey) && !obj.format) {
          obj.format = 'yyyy-MM-dd HH:mm:ss'
        }
        if (obj.format) {
          this.subItem.valueFormat = obj.format
        }
      },
      handleChangeFieldValueType(type) {
        if (type === 2 && this.isRange && this.subItem.field) {
          this.subItem.fieldValue = null;
          return;
        }
        this.subItem.fieldValue = ''
      },
      handleChangeBuiltFieldValue(val) {
        const obj = this.builtOptions.find(o => o.value == val);
        if (obj.format) {
          this.subItem.valueFormat = obj.format
        }
      },
      handleChangeParamsConfig(val) {
        const obj = this.paramsConfig.find(o => o.field == val);
        if (obj.format) {
          this.subItem.valueFormat = obj.format
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .field-value-select {
    display: flex;
    align-items: center;
    &__type {
      width: 180px;
    }
    &__text {
      flex: 1;
    }

    ::v-deep .el-input,
    .el-select,
    .el-input-number,
    .el-date-editor {
      width: 100%;
    }
  }
</style>
